<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

        <!-- <link rel="stylesheet" href="css/icon-font.css"> -->
        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">
        
        <title>Natours | Exciting tours for adventurous people</title>
    </head>
    <body>
        <div class="navigation">
            <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
            <label for="navi-toggle" class="navigation__button">
                <span class="navigation__icon">&nbsp;</span>
            </label>
            <div class="navigation__background">&nbsp;</div>
            <nav class="navigation__nav">
                <ul class="navigation__list">
                    <li class="navigation__item"><a href="#" class="navigation__link"><span>01</span>About Natours</a></li>
                    <li class="navigation__item"><a href="#" class="navigation__link"><span>02</span>Your benfits</a></li>
                    <li class="navigation__item"><a href="#" class="navigation__link"><span>03</span>Popular tours</a></li>
                    <li class="navigation__item"><a href="#" class="navigation__link"><span>04</span>Stories</a></li>
                    <li class="navigation__item"><a href="#" class="navigation__link"><span>05</span>Book now</a></li>
                </ul>
            </nav>
        </div>
        
        <header class="header">
            <div class="header__logo-box">
                <img src="img/logo-white.png" alt="Logo" class="header__logo">
            </div>
            <div class="header__text-box">
                <h1 class="heading-primary">
                    <span class="heading-primary--main">outdoors</span>
                    <span class="heading-primary--sub">is where lift happens</span>
                </h1>
                <a href="#section-tours" class="btn btn--white btn--animated">Discover our tours</a>
            </div>      
        </header>


        <!-- <section class="grid-test">
            <div class="row">
                <div class="col-1-of-2">col 1 of 2</div>
                <div class="col-1-of-2">col 1 of 2</div>
            </div>

            <div class="row">
                <div class="col-1-of-3">col 1 of 3</div>
                <div class="col-1-of-3">col 1 of 3</div>
                <div class="col-1-of-3">col 1 of 3</div>
            </div>

            <div class="row">
                <div class="col-1-of-3">col 1 of 3</div>
                <div class="col-2-of-3">col 2 of 3</div>
            </div>

            <div class="row">
                <div class="col-1-of-4">col 1 of 4</div>
                <div class="col-1-of-4">col 1 of 4</div>
                <div class="col-1-of-4">col 1 of 4</div>
                <div class="col-1-of-4">col 1 of 4</div>
            </div>

            <div class="row">
                <div class="col-1-of-4">col 1 of 4</div>
                <div class="col-1-of-4">col 1 of 4</div>
                <div class="col-2-of-4">col 2 of 4</div>
            </div>

            <div class="row">
                <div class="col-1-of-4">col 1 of 4</div>
                <div class="col-3-of-4">col 3 of 4</div>
            </div>
        </section> -->
        
        <main>
            <section class="section-about">
                <div class="u-center-text u-margin-bottom-big">
                    <h2 class="heading-secondary">
                        Exciting tours for adventurous people
                    </h2>
                </div>

                <div class="row">
                    <div class="col-1-of-2">
                        <h3 class="heading-tertiary u-margin-bottom-small">You're going to fall n love with nature</h3>
                        <p class="paragraph">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, enim aliquid sed sequi velit pariatur ipsam nobis ducimus iste! Quasi dicta pariatur illum ad! Nihil non repellat maiores debitis deserunt!
                        </p>

                        <h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
                        <p class="paragraph">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, enim aliquid sed sequi velit pariatur ipsam nobis ducimus iste! Quasi dicta pariatur illum ad! 
                        </p>

                        <a href="#" class="btn-text">Learn more &rarr;</a>
                    </div>
                    <div class="col-1-of-2">
                        <div class="composition">
                            <img srcset="img/nat-1.jpg 300w, img/nat-1-large.jpg 1000w" 
                                size="(max-width:56.25em) 20vw,(max-width:37.5em) 30vw,300px"
                                alt="photo 1" 
                                class="composition__photo composition__photo--p1"
                                src="img/nat-1-large.jpg"
                                >
                            <img srcset="img/nat-2.jpg 300w, img/nat-2-large.jpg 1000w" 
                                size="(max-width:56.25em) 20vw,(max-width:37.5em) 30vw,300px"
                                alt="photo 2" 
                                class="composition__photo composition__photo--p2"
                                src="img/nat-2-large.jpg"
                                >
                            <img srcset="img/nat-3.jpg 300w, img/nat-3-large.jpg 1000w" 
                                size="(max-width:56.25em) 20vw,(max-width:37.5em) 30vw,300px"
                                alt="photo 3" 
                                class="composition__photo composition__photo--p3"
                                src="img/nat-3-large.jpg"
                                >

                            <!--
                                <img src="img/nat-1-large.jpg" alt="photo 1" class="composition__photo composition__photo--p1">
                            <img src="img/nat-2-large.jpg" alt="photo 2" class="composition__photo composition__photo--p2">
                            <img src="img/nat-3-large.jpg" alt="photo 3" class="composition__photo composition__photo--p3">
                            -->
                        </div>
                        
                    </div>
                </div>
               
            </section>

            <section class="section-features">         
                <div class="row">
                    <div class="col-1-of-4">
                        <div class="feature-box">
                            <i class="feature-box__icon icon-basic-world"></i>
                            <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
                            <p class="feature-box__text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, enim aliquid sed sequi
                            </p>
                        </div>
                    </div>
                    <div class="col-1-of-4">
                        <div class="feature-box">
                            <i class="feature-box__icon icon-basic-compass"></i>
                            <h3 class="heading-tertiary u-margin-bottom-small">Meet nature</h3>
                            <p class="feature-box__text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, enim aliquid sed sequi
                            </p>
                        </div>
                    </div>
                    <div class="col-1-of-4">
                        <div class="feature-box">
                            <i class="feature-box__icon icon-basic-map"></i>
                            <h3 class="heading-tertiary u-margin-bottom-small">find your way</h3>
                            <p class="feature-box__text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, enim aliquid sed sequi
                            </p>
                        </div>
                    </div>
                    <div class="col-1-of-4">
                        <div class="feature-box">
                            <i class="feature-box__icon icon-basic-heart"></i>
                            <h3 class="heading-tertiary u-margin-bottom-small">live a healthier life</h3>
                            <p class="feature-box__text">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, enim aliquid sed sequi
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-tours" id="section-tours">
                <div class="u-center-text u-margin-bottom-big">
                    <h2 class="heading-secondary">
                        Most popular tousrs
                    </h2>
                </div>
                <div class="row">
                    <div class="col-1-of-3">
                        <div class="card">
                            <div class="card__side card__side--front">
                                <div class="card__picture card__picture--1">&nbsp;</div>
                                <h4 class="card__heading">
                                    <span class="card__heading-span card__heading-span--1">
                                        the sea explore
                                    </span>     
                                </h4>
                                <div class="card__details">
                                    <ul>
                                        <li>3 day tours</li>
                                        <li>Up to 30 people</li>
                                        <li>2 tour guides</li>
                                        <li>Sleep in cozy hotels</li>
                                        <li>Difficulty:easy</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card__side card__side--back card__side--back-1">
                                <div class="card__cta">
                                    <div class="card__price-box">
                                        <p class="card__price-only">Only</p>
                                        <p class="card__price-value">$297</p>
                                    </div>
                                    <a href="#popup" class="btn btn--white">Book now!</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-1-of-3">
                        <div class="card">
                            <div class="card__side card__side--front">
                                <div class="card__picture card__picture--2">&nbsp;</div>
                                <h4 class="card__heading">
                                    <span class="card__heading-span card__heading-span--2">
                                        the forset hiker
                                    </span>     
                                </h4>
                                <div class="card__details">
                                    <ul>
                                        <li>7 day tours</li>
                                        <li>Up to 40 people</li>
                                        <li>6 tour guides</li>
                                        <li>Sleep in provided tents</li>
                                        <li>Difficulty:medium</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card__side card__side--back card__side--back-2">
                                <div class="card__cta">
                                    <div class="card__price-box">
                                        <p class="card__price-only">Only</p>
                                        <p class="card__price-value">$497</p>
                                    </div>
                                    <a href="#popup" class="btn btn--white">Book now!</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-1-of-3">
                        <div class="card">
                            <div class="card__side card__side--front">
                                <div class="card__picture card__picture--3">&nbsp;</div>
                                <h4 class="card__heading">
                                    <span class="card__heading-span card__heading-span--3">
                                        the snow adventurer
                                    </span>     
                                </h4>
                                <div class="card__details">
                                    <ul>
                                        <li>5 day tours</li>
                                        <li>Up to 15 people</li>
                                        <li>3 tour guides</li>
                                        <li>Sleep in provided hotels</li>
                                        <li>Difficulty:hard</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card__side card__side--back card__side--back-3">
                                <div class="card__cta">
                                    <div class="card__price-box">
                                        <p class="card__price-only">Only</p>
                                        <p class="card__price-value">$897</p>
                                    </div>
                                    <a href="#popup" class="btn btn--white">Book now!</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="u-center-text u-margin-top-huge">
                    <a href="#" class="btn btn--green">Discover all tours</a>
                </div>


            </section>

            <section class="section-stories">
                <div class="bg-video">
                    <video class="bg-video__content" autoplay muted loop>
                        <source src="img/video.mp4" type="video/mp4">
                        <source src="img/video.webm" type="video/webm">
                        Your browser is not supported!
                    </video>
                </div>
                <div class="u-center-text u-margin-bottom-big">
                    <h2 class="heading-secondary">
                        We make people genuinely happy
                    </h2>
                </div>
                <div class="row">
                    <div class="story">
                        <figure class="story__shape">
                            <img src="img/nat-8.jpg" alt="Person on a tour" class="story__img">
                            <figcaption class="story__caption">
                                Mary Smith
                            </figcaption>
                        </figure>
                        <div class="story__text">
                            <h3 class="heading-tertiary u-margin-bottom-small">I had the best week ever with my family</h3>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum assumenda laborum repellat adipisci deleniti officia maxime cumque odit iure consequuntur. Culpa recusandae magnam dignissimos blanditiis est eius cupiditate magni sequi!
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="story">
                        <figure class="story__shape">
                            <img src="img/nat-9.jpg" alt="Person on a tour" class="story__img">
                            <figcaption class="story__caption">
                                Jack Wilson
                            </figcaption>
                        </figure>
                        <div class="story__text">
                            <h3 class="heading-tertiary u-margin-bottom-small">WOW! My life is completely diffrent now</h3>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum assumenda laborum repellat adipisci deleniti officia maxime cumque odit iure consequuntur. Culpa recusandae magnam dignissimos blanditiis est eius cupiditate magni sequi!
                            </p>
                        </div>
                    </div>
                </div>

                <div class="u-center-text u-margin-top-huge">
                    <a href="#" class="btn-text">Read all stories &rarr;</a>
                </div>

            </section>

            <section class="section-book">
                <div class="row">
                    <div class="book">
                        <div class="book__form">
                            <form action="#" class="form">
                                <div class="u-margin-bottom-medium">
                                    <h2 class="heading-secondary">
                                        start booking now
                                    </h2>
                                </div>
                
                                <div class="form__group">
                                    <input type="text" class="form__input" placeholder="Full Name" id="name" required>
                                    <label for="name" class="form__label">Full name</label>
                                </div>
                                <div class="form__group">
                                    <input type="email" class="form__input" placeholder="Email addres" id="email" required>
                                    <label for="email" class="form__label">Email address</label>
                                </div>

                                <div class="form__group u-margin-bottom-medium">
                                    <div class="form__radio-group">
                                        <input type="radio" class="form__radio-input" id="small" name="size">
                                        <label for="small" class="form__radio-label">
                                            <span class="form__radio-button"></span>
                                            Small tour group
                                        </label>
                                    </div>
                                    <div class="form__radio-group">
                                        <input type="radio" class="form__radio-input" id="large" name="size">
                                        <label for="large" class="form__radio-label">
                                            <span class="form__radio-button"></span>
                                            Large tour group
                                        </label>
                                    </div>
                                </div>

                                <div class="form__group">
                                    <button class="btn btn--green">Next step &rarr;</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <footer class="footer">
            <div class="footer__logo-box">
                <picture class="footer__logo">
                    <source srcset="img/logo-green-small-1x.png 1x,img/logo-green-small-2x.png 2x" 
                            media="(max-width:37.5em)">
                    <img srcset="img/logo-green-1x.png 1x,img/logo-green-2x.png 2x" alt="Full logo">
                </picture>    

                
            </div>
            <div class="row">
                <div class="col-1-of-2">
                    <div class="footer__navigation">
                        <ul class="footer__list">
                            <li class="footer__item"><a href="#" class="footer__link">Company</a></li>
                            <li class="footer__item"><a href="#" class="footer__link">Contact us</a></li>
                            <li class="footer__item"><a href="#" class="footer__link">Carrers</a></li>
                            <li class="footer__item"><a href="#" class="footer__link">Privacy policy</a></li>
                            <li class="footer__item"><a href="#" class="footer__link">Terms</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-1-of-2">
                    <p class="footer__copyright">
                        Built by <a href="#" class="footer__link">Jonas Schmedtmann</a> for his online course <a href="#" class="footer__link">Advanced CSS and Sass</a>.
                        Copyright &copy; by Jonas Schmedtmann. You are 100% allowed to use this webpage for both personal
                        and commercial use, but NOT to claim it as your own design. A credit to the original author, Jonas
                        Schmedtmann, is of course highly appreciated!
                    </p>
                </div>
            </div>
        </footer>
        <div class="popup" id="popup">
            <div class="popup__content">
                <div class="popup__left">
                    <img src="img/nat-8.jpg" alt="Tour photo" class="popup__img">
                    <img src="img/nat-9.jpg" alt="Tour photo" class="popup__img">
                </div>
                <div class="popup__right">
                    <a href="#section-tours" class="popup__close">&times;</a>
                    <h2 class="heading-secondary u-margin-bottom-small">Start booking now</h2>
                    <h3 class="heading-tertiary u-margin-bottom-small">Important &ndash; Please read these terms before booking</h3>
                    <p class="popup__text">
                       Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed iste ad, necessitatibus doloribus in dolor quod error obcaecati soluta a accusantium sunt ipsum, nisi debitis libero quasi sint qui neque?
                       Laborum modi, maiores ad magnam distinctio voluptatum veniam accusantium eos aspernatur sit dolore incidunt aperiam sunt vero voluptate delectus! Quisquam distinctio expedita modi commodi placeat omnis repudiandae! Officia, reiciendis eos?
                       Dolores distinctio quo dolor sunt sed, aperiam amet, laborum vitae odit blanditiis ex architecto nisi sit nemo maiores? Quibusdam nostrum nemo excepturi non id beatae repellendus dolores deserunt, veritatis numquam!
                    </p>
                    <a href="#" class="btn btn--green">Book now</a>
                </div>
            </div>
        </div>
    </body>
</html>
